<template>
  <div class="container">
    <el-dialog
      title="新增学科"
      :visible="subDailogShow"
      @close="btnCancel"
    >
      <el-form ref="subAddForm" :model="subAddForm" :rules="subAddRules" label-width="80px">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="subAddForm.subjectName" placeholder="请输入学科名称" />
        </el-form-item>
        <el-form-item label="是否显示">
          <!-- 开关显示值
        :active-value="1" 开
        :inactive-value="0" 关
         -->
          <el-switch
            v-model="subAddForm.isFrontDisplay"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <el-row type="flex" justify="end">
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button type="primary" size="small" @click="btnOk">确定</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { add, detail, update } from '@/api/hmmm/subjects.js'
export default {
  props: {
    subDailogShow: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      subAddForm: {
        // 表单数据
        subjectName: '', // 学科名称
        isFrontDisplay: 1// 是否显示
      },
      subAddRules: {
        // 表单验证
        subjectName: [{ required: true, message: '请输入学科名称', trigger: 'blur' }]
      }

    }
  },
  methods: {
    btnCancel () {
      // 取消
      this.subAddForm = {
        subjectName: '',
        isFrontDisplay: 1
      }
      this.$refs.subAddForm.resetFields()
      this.$emit('update:subDailogShow', false)
    },
    async btnOk () {
      // 确定
      // 验证表单
      await this.$refs.subAddForm.validate()
      try {
        if (this.subAddForm.id) {
          // 有证明是编辑
          await update(this.subAddForm)
        } else {
          // 新增学科关闭弹框 渲染列表提示成功
          await add(this.subAddForm)
        }
        // 渲染列表
        this.$emit('renderList')
        // 关闭弹框
        this.$emit('update:subDailogShow', false)
        this.$message.success('操作成功')
      } catch (e) {
        console.log(e)
      }
    },
    async subjectEdit (row) {
      // 回显
      const { data } = await detail(row)
      this.subAddForm = data
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-dialog{
  width:400px;
  height:280px
}</style>
